<template>
    <view class="container">
        <view class="content">
            <view class="content-tab d-rn d-ac d-ja">
                <view class="content-tab-one d-cw d-ac d-jc" v-for="(item, index) in 3" :key="index"
                    @click="handleNav(index)">
                    <text :class="navSts == index ? 'active' : 'outactive'">{{
                    !index
                        ? $t('holiday_application')
                        : index == 1
                            ? $t('colleague_holiday')
                            : $t('holiday_approval')
                }}</text>
                    <text v-if="navSts == index"></text>
                </view>
            </view>
        </view>

        <view class="jixiao" v-if="navSts && !approveStatus">
            <view class="content-select d-rn d-ac d-jb">
                <view class="content-select-one">
                    <picker class="text" mode="date" fields="year" :value="yearTime" start="2021-01" end="2050-09"
                        @change="DateChange">
                        <view class="d-rn d-ac d-jc">
                            <view class="picker-con d-rn d-ac d-jc">
                                {{ showYearNum ? showYearNum : $t('by_year_view') }}
                            </view>
                            <image src="../../static/img/bottom.png" mode="" class="bottom" style="margin-left: 20rpx">
                            </image>
                        </view>
                    </picker>
                </view>

                <view class="content-select-shu"> | </view>
                <view class="content-select-one">
                    <picker class="text" mode="date" fields="month" :value="monthTime" start="2021-01" end="2099-12"
                        @change="bindPickermonth">
                        <view class="d-rn d-ac d-jc">
                            <view class="picker-con d-cn d-jc">
                                <view class="uni-input one-txt-cut">{{
                    showMonthNum ? showMonthNum : $t('by_month_view')
                }}
                                </view>
                            </view>
                            <image src="../../static/img/bottom.png" mode="" class="bottom" style="margin-left: 20rpx">
                            </image>
                        </view>
                    </picker>
                </view>
                <view class="content-select-shu"> | </view>
                <view class="content-select-one">
                    <picker class="text" mode="date" start="2021-01" end="2050-09" @change="bindPicker">
                        <view class="d-rn d-ac d-jc">
                            <view class="picker-con d-cn d-jc">
                                <view class="uni-input one-txt-cut">{{ showDayNum ? showDayNum : $t('by_day_view') }}
                                </view>
                            </view>
                            <image src="../../static/img/bottom.png" mode="" class="bottom" style="margin-left: 20rpx">
                            </image>
                        </view>
                    </picker>
                </view>
            </view>

            <view class="jixiao-list">
                <view class="jixiao-list-one" v-for="(item, index) in tongshiList" :key="index"
                    v-if="tongshiList.length > 0">
                    <view class="jixiao-list-one-top d-rn d-ac d-jb">
                        <view class="jixiao-list-one-top-left d-rn d-ac">
                            <text>{{ item.employeeName }}</text>
                            <text><span v-if="item.employment.positionName"></span><span v-if="item.employment.positionName &&
                    item.employment.departmentName
                    ">/</span><span v-if="item.employment.departmentName">{{
                    item.employment.departmentName
                }}</span></text>
                        </view>

                        <view class="jixiao-list-one-top-right">
                            <text>{{ item.createTime }}</text>
                        </view>


                    </view>
                    <view class="jixiao-list-one-bto">
                       <text>{{ $t('start_time') }}：</text> <text>{{ item.leaveStartDate }}</text>
                    </view>
                    <view class="jixiao-list-one-bto">
                       <text>{{ $t('start_time') }}：</text> <text> {{ item.leaveEndDate }}</text>
                    </view>
                    <view class="jixiao-list-one-bto">
                       <text>{{ $t('leave_days') }}：</text> <text>{{ item.leaveDays }}{{ $t('days') }}</text>
                    </view>
                </view>
            </view>
            <view v-if="tongshiList.length == 0 && !approveStatus" style="margin-top: 200rpx">
                <u-empty mode="data"></u-empty>
            </view>
        </view>
        <view class="mark" v-else-if="!navSts && !approveStatus">
            <view class="mark-shai">
                <view class="content-select d-rn d-ac d-jb">
                    <view class="content-select-one d-rn d-ac d-jc" style="width: 300rpx">
                        <text>{{ $t('vacation_apply_records') }}</text>
                    </view>
                    <view class="content-select-shu"> | </view>
                    <view class="content-select-one">
                        <picker @change="bindPickerChange" :range="hostList" range-key="vacationName" class="picker">
                            <view class="d-rn d-ac d-jc">
                                <view class="picker-con d-cn d-jc">
                                    <view class="uni-input one-txt-cut" v-if="holidaytype.vacationName">{{
                    holidaytype.vacationName }}
                                    </view>
                                    <view class="uni-input one-txt-cut" v-else>{{ $t('select') }}</view>
                                </view>
                                <image src="../../static/img/bottom.png" style="margin-left: 20rpx" mode=""
                                    class="bottom"></image>
                            </view>
                        </picker>
                    </view>
                    <view class="content-select-shu"> | </view>
                    <view class="content-select-one">
                        <picker @change="bindPickerChanges" :range="stsList" range-key="name" class="picker">
                            <view class="d-rn d-ac d-jc">
                                <view class="picker-con d-cn d-jc">
                                    <view class="uni-input one-txt-cut" v-if="stsType.name">{{ stsType.name }}
                                    </view>
                                    <view class="uni-input one-txt-cut" v-else>{{ $t('select') }}</view>
                                </view>
                                <image src="../../static/img/bottom.png" style="margin-left: 20rpx" mode=""
                                    class="bottom"></image>
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="">
                    <!-- <u-calendar ref="calendar" :listss="listss" v-if="listss && listss.length" :sts='sts'></u-calendar> -->
                    <!-- <u-calendar @handleGetMonth="handleGetMonth" :nowMonth = "nowMonth" ref="calendar" :maxDate="maxDate" :minDate="minDate" :sts='sts'></u-calendar> -->
                    <u-calendar ref="calendar" @changeYear="changeYear" :maxDate="maxDate" :minDate="minDate"
                        :nowMonth="nowMonth" :sts="sts" :dateLists="shenpiList" @handleGetRiFather="handleGetRiFather"
                        @handleGetMonth="handleGetMonth" @geyheights="geyheights" :yearsNum="yearsNum"></u-calendar>
                </view>
            </view>
            <view class="list">
                <view class="" v-for="(item, index) in shenpiList" :key="index"
                    v-if="shenpiList && shenpiList.length > 0">
                    <view class="list-one">
                        <view class="list-one-one" @click="toDetail(item)">
                            <view class="list-one-one-title d-rn d-ac d-jb">
                                <view class="list-one-one-title-left d-rn d-ac">
                                    <text>{{ item.vacationName }}</text>
                                    <!-- <text v-if="item.roleName || item.deptName">{{item.roleName}}/{{item.deptName}}</text> -->
                                </view>
                                <view class="list-one-one-title-right">
                                    <text>{{ item.createTime }}</text>
                                </view>
                            </view>
                            <view class="list-one-one-content d-cn">
                                <text>{{ item.vacationName
                                    }}{{ item.leaveDays }}天</text>
                                <text>开始时间：{{ item.leaveStartDate }}
                                    <text style="margin-left: 10px;"
                                        v-if="item && (item.leaveStartDateType == 2 && item.leaveEndDateType == 2)">{{
                    $t('morning') }}</text>
                                    <text style="margin-left: 10px;"
                                        v-if="item && (item.leaveStartDateType == 3 && item.leaveEndDateType == 3)">{{
                    $t('afternoon') }}</text>
                                    <text style="margin-left: 10px;"
                                        v-if="item && (item.leaveStartDateType == 2 && item.leaveEndDateType == 3)">{{
                    $t('morning') }}</text>

                                </text>
                                <text>结束时间：{{ item.leaveEndDate }}
                                    <text style="margin-left: 10px;"
                                        v-if="item && (item.leaveStartDateType == 2 && item.leaveEndDateType == 2)">{{
                    $t('morning') }}</text>
                                    <text style="margin-left: 10px;"
                                        v-if="item && (item.leaveStartDateType == 3 && item.leaveEndDateType == 3)">{{
                    $t('afternoon') }}</text>
                                    <text style="margin-left: 10px;"
                                        v-if="item && (item.leaveStartDateType == 2 && item.leaveEndDateType == 3)">{{
                    $t('afternoon') }}</text>

                                </text>
                                <text class="txt-cut" v-if="item.leaveReason">{{ $t('reason') }}：{{ item.leaveReason
                                    }}</text>
                                <image v-if="item.leaveFile" :src="item.leaveFile" mode="widthFix" style="width: 100%">
                                </image>
                                <!-- <text style="color: #1c77d4;cursor: pointer;">{{item.leaveFile}}</text> -->
                            </view>
                            <view class="list-one-one-sts d-rn d-ac d-jb">
                                <text></text>
                                <!-- <text>{{!item.state?'待审批':item.state==1?'审核中':item.state==2?'同意':item.state==3?'拒绝':''}}</text> -->
                                <text v-if="item.leaveState == '0'" style="color: #ff4b50">{{ $t('pending_approval')
                                    }}</text>
                                <text v-if="item.leaveState == '1'" style="color: dodgerblue">{{ $t('reviewing')
                                    }}</text>
                                <text v-if="item.leaveState == '2'" style="color: lightgreen">{{ $t('approved')
                                    }}</text>
                                <text v-if="item.leaveState == '3'" style="color: orangered">{{ $t('rejected') }}</text>

                                <text v-if="item.leaveState == '5' &&
                    item.employerCancelLeaveList &&
                    item.employerCancelLeaveList[0]
                    ">
                                    <text v-if="item.employerCancelLeaveList[0]
                    .cancelLeaveState == 0
                    " style="color: dodgerblue">{{ $t('reviewing') }}</text>
                                    <text v-if="item.employerCancelLeaveList[0]
                    .cancelLeaveState == 1
                    " style="color: dodgerblue">{{ $t('pending_approval') }}</text>
                                    <text v-if="item.employerCancelLeaveList[0]
                    .cancelLeaveState == 2
                    " style="color: lightgreen">{{ $t('agree') }}</text>
                                    <text v-if="item.employerCancelLeaveList[0]
                    .cancelLeaveState == 3
                    " style="color: orangered">{{ $t('reject') }}</text>
                                </text>
                                <text v-if="item.leaveState == '4'" style="color: orangered">{{ $t('canceled') }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="shenpiList.length == 0 && !approveStatus" style="margin-top: 200rpx">
                    <u-empty mode="data"></u-empty>
                </view>
            </view>
        </view>

        <view class="">
            <u-datetime-picker :show="showYear" v-model="valueYear" mode="year-month"></u-datetime-picker>
        </view>
        <approve v-if="approveStatus" :approveStatus="approveStatus"></approve>
        <u-picker :show="changeYearShow" :columns="columns" @cancel="changeYearShow = false"
            @confirm="changeYearConfirm" :defaultIndex="defaultIndex"></u-picker>
    </view>
</template>

<script>
var _self;
import approve from './approve';
import {
    leavegetAll,
    leavelists,
    getPersonHolidaysList,
    getPersonHolidays,
    getEmployerLeaveVacation,
} from '../../api/index.js';
export default {
    components: {
        approve,
    },
    data() {
        return {
            yearsNum: 0,
            navSts: 0,
            hostList: [],
            stsList: [
                {
                    name: this.$t('all'),
                    id: '',
                },

                {
                    name: this.$t('pending_review'),
                    id: 0,
                },
                {
                    name: this.$t('under_review'),
                    id: 1,
                },
                {
                    name: this.$t('approved'),
                    id: 2,
                },
                {
                    name: this.$t('rejected'),
                    id: 3,
                },
                {
                    name: this.$t('canceled'),
                    id: 4,
                },
            ],
            stsType: {
                name: '',
                id: '',
            },

            holidaytype: {
                typeName: '',
                typeId: '',
            },
            type: {
                typeName: '',
                typeId: '',
            },
            listss: [
                {
                    month: '1',
                },
                {
                    month: '2',
                },
                {
                    month: '3',
                },
                {
                    month: '4',
                },
                {
                    month: '5',
                },
                {
                    month: '6',
                },
                {
                    month: '7',
                },
                {
                    month: '8',
                },
            ],
            sts: false,
            showYear: false,
            valueYear: Number(new Date()),
            maxDate: '',
            minDate: '',
            nowMonth: null,
            pageNum: 1,
            pageSize: 3,
            hasPage: false,
            total: 0,
            totalPage: 0,
            shenpiList: [],
            tongshiList: [],
            maxDate: '',
            minDate: '',
            sts: false,
            yearTime: '',
            monthTime: '',
            dateTime: '',
            nowTime: '',
            newMonths: '',
            years: '',
            showYearNum: '',
            showMonthNum: '',
            showDayNum: '',
            approveStatus: false,
            changeYearShow: false,
            yearsNum: '',
            changeYearShow: false,
            columns: [
                [
                    2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,
                    2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033, 2034,
                    2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044,
                    2045,
                ],
            ],
            defaultIndex: [],
        };
    },
    onLoad() {
        _self = this;
        var today = new Date();
        var year = today.getFullYear();
        _self.years = year;
        _self.yearsNum = year;
        this.defaultIndex = [this.columns[0].findIndex((v) => v == this.years)];
        this.yearsNum = today.getFullYear();
        _self.nowMonth = today.getMonth();
        _self.newMonths = today.getMonth() + 1;
        _self.maxDate = year + '-12-31';
        _self.minDate = year + '-1-1';
        if (_self.newMonths < 10) {
            _self.newMonths = '0' + _self.newMonths;
            _self.nowTime = year + '-' + _self.newMonths + '-' + '01';
        }
    },
    onShow() {
        this.getEmployerLeaveVacation();
        _self.getgetPersonHolidaysList();
    },
    methods: {
        changeYearConfirm(e) {
            console.log('e', e);
            this.years = e.value[0];
            this.yearsNum = e.value[0];
            this.changeYearShow = false;
            this.yearMonthDay = `${this.year}-${this.nowMonth < 10 ? '0' + this.nowMonth : this.nowMonth
                }-${this.dayNum}`;
            this.getEmployerLeaveVacation();
            _self.getgetPersonHolidaysList();
        },
        changeYear(flag) {
            this.changeYearShow = flag;
            console.log('点击了年份');
        },
        getgetPersonHolidaysList() {
            _self.shenpiList = [];
            getPersonHolidaysList({
                vacationId: _self.holidaytype.typeId,
                leaveState: _self.stsType.id,
                pageSize: 999,
                pageNum: 1,
                months: _self.nowMonths,
                years: _self.years,
            }).then((res) => {
                console.log('🐛 ~ getgetPersonHolidaysList ~ res:', res);
                _self.shenpiList = res.data.records;
            });
        },
        // 查询 当前雇员 请假记录 涉及到得假期
        getEmployerLeaveVacation() {
            getEmployerLeaveVacation({}).then((res) => {
                this.hostList = res.data;
            });
        },
        //跳转假期详情
        toDetail(item) {
            _self.$commonFun.goUrl(1, './detail', item);
        },

        // getleavegetAll(){
        // 	leavegetAll({
        // 		pageNum:_self.pageNum,
        // 		pageSize:_self.pageSize,
        // 		monuth:_self.nowMonth,
        // 		userId:JSON.parse(uni.getStorageSync('loginInfo')).userid,
        // 		leaveType:_self.holidaytype.typeId,
        // 		leaveState:_self.stsType.id
        // 	}).then(res=>{
        // 		if(res.code == 200){
        // 			_self.shenpiList = res.data;
        // 			_self.total = res.total;

        // 			_self.totalPage = _self.pageNum * _self.pageSize
        // 			if(_self.totalPage>res.total){
        // 				_self.hasPage = false
        // 			}else{
        // 				_self.hasPage = true
        // 			}

        // 		}
        // 	})
        // },

        getleavelists() {
            leavelists({
                pageNum: 1,
                pageSize: 999,
                months: _self.monthTime,
                days: _self.dateTime,
                years: _self.yearTime,
                // userId:JSON.parse(uni.getStorageSync('loginInfo')).userid,
            }).then((res) => {
                if (res.code == 200) {
                    // _self.tongshiList = [{employment:{positionName:'1',departmentName:'2'},leaveStartDate:'3',leaveDays:4,createTime:5}];
                    _self.tongshiList = res.data.records;
                    // _self.total = res.total;

                    // _self.totalPage = _self.pageNum * _self.pageSize
                    // if(_self.totalPage>res.total){
                    // 	_self.hasPage = false
                    // }else{
                    // 	_self.hasPage = true
                    // }
                }
            });
        },
        handleNav(index) {
            _self.navSts = index;
            this.hostList = [];
            this.shenpiList = [];
            if (!index) {
                this.approveStatus = false;
                // _self.getleavegetAll()
                this.getEmployerLeaveVacation();
                _self.getgetPersonHolidaysList();
            } else if (index == 1) {
                this.approveStatus = false;
                _self.getleavelists();
            } else {
                this.approveStatus = true;
                // _self.getEmployerLeaveVacation();
            }
        },
        handleZiPing(item, index) {
            _self.$commonFun.goUrl(1, '../selfEvaluationOfPerformance/index', item);
        },
        handleJiXiaoDetails(item) {
            _self.$commonFun.goUrl(1, '../jixiaoqiangqing/index', item);
        },
        bindPickerChange(e) {
            _self.holidaytype.typeName =
                _self.hostList[e.detail.value].vacationName;
            _self.holidaytype.typeId = _self.hostList[e.detail.value].id;
            // _self.getleavegetAll()
            _self.getgetPersonHolidaysList();
        },
        bindPickerChanges(e) {
            _self.shenpiList = [];
            _self.stsType.name = _self.stsList[e.detail.value].name;
            _self.stsType.id = _self.stsList[e.detail.value].id;
            _self.getgetPersonHolidaysList();
            // _self.getleavegetAll()
        },
        handleshowYear() {
            _self.showYear = true;
        },
        handleGetRiFather(e) { },
        handleGetMonth(e) {
            _self.nowMonths = e + 1;
            if (_self.nowMonths < 10) {
                _self.nowMonths = '0' + _self.nowMonths;
            }
            _self.nowTime = _self.years + '-' + _self.nowMonths + '-' + '01';
            console.log(_self.nowMonths);
            // _self.getgetPersonHolidaysList();
            // _self.getleavegetAll()
        },
        geyheights() { },
        DateChange(e) {
            _self.yearTime = e.detail.value;
            this.showYearNum = e.detail.value;
            this.showMonthNum = '';
            this.showDayNum = '';
            _self.getleavelists();
        },
        bindPickermonth(e) {
            if (e.detail.value) {
                _self.yearTime = e.detail.value.substring(0, 4);
                _self.monthTime = e.detail.value.substring(5, 7);
                this.showMonthNum = e.detail.value;
                this.showYearNum = '';
                this.showDayNum = '';
            }
            _self.getleavelists();
        },
        bindPicker(e) {
            if (e.detail.value) {
                _self.yearTime = e.detail.value.substring(0, 4);
                _self.monthTime = e.detail.value.substring(5, 7);
                _self.dateTime = e.detail.value.substring(8, 10);
                this.showDayNum = e.detail.value;
                this.showYearNum = '';
                this.showMonthNum = '';
            }
            _self.getleavelists();
        },
    },
    onReachBottom() {
        if (_self.hasPage) {
            _self.pageNum++;
            _self.hasPage = false;
            _self.getleavegetAll();
        }
    },
};
</script>

<style lang="scss">
page {
    background-color: #f5f5f5;
}

.container {
    width: 100%;

    .content {
        background-color: #ffffff;

        &-tab {
            padding: 24rpx 0;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #f5f5f5;

            text:nth-of-type(1) {
                font-size: 30rpx;
            }

            text:nth-of-type(2) {
                width: 138rpx;
                height: 4rpx;
                background-color: #fdb911;
                position: absolute;
                top: 93%;
            }

            .active {
                color: #333333;
                font-weight: 500;
            }

            .outactive {
                color: #999999;
            }
        }
    }

    .jixiao {
        width: 100%;
        margin-top: 20rpx;

        .content-select {
            background-color: #ffffff;

            &-one {
                width: 30%;
                padding: 22rpx 0;
                box-sizing: border-box;

                .bottom {
                    width: 12rpx;
                    height: 7rpx;
                }
            }

            &-shu {
                color: #eeeeee;
            }
        }

        &-title {
            border-bottom: 1px solid #eeeeee;
            padding: 24rpx;
            box-sizing: border-box;
            background-color: #ffffff;

            text:nth-of-type(1) {
                font-size: 28rpx;
                color: #666666;
            }

            text:nth-of-type(2) {
                font-size: 28rpx;
            }
        }

        &-list {
            background-color: #ffffff;
            margin-top: 20rpx;

            &-one {
                padding: 24rpx;
                box-sizing: border-box;
                border-bottom: 1px solid #eeeeee;
                margin-bottom: 20rpx;

                &-top {
                    &-left {
                        text:nth-of-type(1) {
                            font-size: 36rpx;
                            color: #333333;
                            // font-weight: bold;
                            margin-right: 20rpx;
                        }

                        text:nth-of-type(2) {
                            padding: 6rpx 10rpx;
                            background-color: #ffefdf;
                            border-radius: 12rpx;
                            font-size: 20rpx;
                            color: #ff8f1f;
                        }
                    }

                    &-right {
                        text {
                            color: #cccccc;
                        }
                    }
                }

                &-bto {
                    margin-top: 20rpx;
                    color: #999999;
                }
            }
        }
    }

    .mark {
        &-shai {
            .content-select {
                background-color: #ffffff;

                &-one {
                    width: 30%;
                    padding: 22rpx 0;
                    box-sizing: border-box;

                    .bottom {
                        width: 12rpx;
                        height: 7rpx;
                    }
                }

                &-shu {
                    color: #eeeeee;
                }
            }
        }

        .list {
            width: 94%;
            margin: 24rpx auto;

            &-one {
                background-color: #ffffff;
                padding: 24rpx;
                box-sizing: border-box;
                margin-bottom: 24rpx;
                border-radius: 12rpx;

                &-one {
                    &-title {
                        margin-bottom: 16rpx;

                        &-left {
                            text:nth-of-type(1) {
                                font-size: 36rpx;
                                font-weight: bold;
                                color: #333333;
                                margin-right: 20rpx;
                            }

                            text:nth-of-type(2) {
                                padding: 6rpx;
                                box-sizing: border-box;
                                font-size: 20rpx;
                                font-weight: bold;
                                color: #ff8f1f;
                                background-color: #ffefdf;
                                border-radius: 12rpx;
                            }
                        }

                        &-right {
                            text {
                                color: #cccccc;
                            }
                        }
                    }

                    &-content {
                        padding-bottom: 24rpx;
                        border-bottom: 1px dashed #d2d2d2;

                        text {
                            margin-bottom: 10rpx;
                            color: #999999;
                        }
                    }

                    &-sts {
                        padding-top: 24rpx;
                        box-sizing: border-box;

                        text {
                            font-weight: bold;
                        }

                        .activetext {
                            color: #ffffff;
                        }
                    }
                }
            }
        }
    }
}
</style>
